<template>
	<view>
		<uNavbar title="支付中心"></uNavbar>
		<view class="pay_money flex_ZC">
			<text class="f32">实付金额（元）</text>
			<text class="c5">{{cacheData.allMoney}}</text>
		</view>

		<view class="pay_box flex_Z">
			<text>请选择支付方式</text>

			<view class="pay_type flex_Z" v-if="xsShow && cacheData.type == 1" @click="changeXs">
				<view class="balance flex_dq">
					<view class="pay_type_l flex_c">
						<image src="../../static/icon/i_checkbox.png" mode="aspectFill" v-if="xsPay"></image>
						<image src="../../static/icon/i_checkbox1.png" mode="" v-else></image>
					</view>
					<view class="balance_top flex_dq">
						<image class="img1" src="../../static/image/xs_pay.png" mode=""></image>
						<text>新生钱包</text>
					</view>
				</view>
				<text class="available">可用：{{xsMoney}}</text>
			</view>
			<view class="pay_type flex_Z" v-if="sdShow && cacheData.type == 2" @click="changeSd">
				<view class="balance flex_dq">
					<view class="pay_type_l flex_c">
						<image src="../../static/icon/i_checkbox.png" mode="aspectFill" v-if="sdPay"></image>
						<image src="../../static/icon/i_checkbox1.png" mode="" v-else></image>
					</view>
					<view class="balance_top flex_dq">
						<image class="img1" src="../../static/image/sd_pay.png" mode=""></image>
						<text>杉德钱包</text>
					</view>
				</view>
				<text class="available">可用：{{sdMoney}}</text>
			</view>
			<view class="tips flex_ld" v-if="!xsShow && cacheData.type == 1">
				<text>请先开通第三方钱包</text>
				<view class="tips_r flex_dq" @click="goWallet">
					<text>去查看</text>
					<uni-icons type="right" color="#A68A64" size="20"></uni-icons>
				</view>
			</view>
			<view class="tips flex_ld" v-if="!sdShow && cacheData.type == 2">
				<text>请先开通第三方钱包</text>
				<view class="tips_r flex_dq" @click="goWallet">
					<text>去查看</text>
					<uni-icons type="right" color="#A68A64" size="20"></uni-icons>
				</view>
			</view>

		</view>
		<view class="ready_my flex_c" @click="isReady" v-if="!readyMoney">
			<text >请先开通第三方钱包</text>
		</view>
		<view v-else>
			<view class="submit flex_c" @click="confirmShow" v-if="haveCache">
				<image class="highlights" src="../../static/image/mask.png" mode=""></image>
				<text>确认下单</text>
			</view>
		</view>

		<view class="notice flex_Z" v-if="nodeCentent">
			<text class="f36 c6">购买需知</text>
			<rich-text class="notice_txt f24 c9" :nodes="nodeCentent"></rich-text>
		</view>
		<u-popup :show="warningShow" mode="center" :overlayStyle='overlayStyle' bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="warning_txt">请通过正规流程购买商品!</text>
				<view class="prompt_ntm" @click="userConfrim">
					<text>确认</text>
				</view> 
				<view class="empty"></view>
			</view>
		</u-popup>

		<u-popup :show="keyboardShow" mode="center" @close="keyboardShow=false" closeable bgColor="transparent">
			<view class="pass_wrap">
				<view class="tit">
					请输入交易密码
				</view>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#555275" focus class="code_input"
					v-model="securityPwd" mode="line" dot></u-code-input>
				<view class="other_btnwrap">
					<view class="other_btn1" @click="keyboardShow=false,securityPwd=''">
						取消
					</view>
					<view class="other_btn2" @click="valChange()">
						确认
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="jiazaiShow" mode="center" bgColor="transparent">
			<view class="zairu">
				<u-loadmore status="loading" color="#ffffff" iconColor="#ffffff" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {memberBalance} from "../../api/index.js";
	import {proppay,integralPay} from "../../api/store.js";
	import {orderCheck2} from "../../api/shopp.js";
	export default {
		data() {
			return {
				sestype: '',//操作系统
				securityPwd: '', //安全密码
				remind: '', //提示语
				nodeCentent: '',
				requestParams:'',
				hknumber:0, //次数
				xsMoney: 0, //新生余额
				sdMoney: 0, //杉德余额
				payType: null, //3 福合通宝 、4福合元宝
				xsShow: false,//新生显示
				sdShow: false,
				xsPay: false,
				sdPay: false,
				keyboardShow: false, //输入框
				warningShow: false, //警告
				haveCache: false, //有无缓存 
				readyMoney: false, // 金币接口是否准备完毕
				jiazaiShow: false,
				cacheData: {}, //待支付商品缓存信息
				overlayStyle: {
					backdropFilter: 'blur(4px)',

				}
			}
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: (res) => {
					if (res.uniPlatform == "web") {
						this.sestype = "h5"
						console.log(this.sestype, )
					}
					if (res.uniPlatform == "app") {
						this.sestype = "app"
						console.log(this.sestype)
					}
				}
			});
			if(e.order_sn){
				this.jiazaiShow = true
				this.orderSn = e.order_sn
				this.isCallback()
			}
			this.getuser()
			this.cacheData = uni.getStorageSync('productCacheInfo')
			if (this.cacheData) {
				console.log(this.cacheData.type);
				if (this.cacheData.type == '1') {
					this.payType = 8
					this.xsPay = true
				} else {
					this.payType = 9
					this.sdPay = true
				}
				this.haveCache = true
				this.nodeCentent = this.cacheData.notice.replace(/\r\n/g, "<p/>") || '';
			} else {
				this.haveCache = false
				this.warningShow = true
			}
		},
		onShow() {
			this.requestParams =  uni.getStorageSync('requestParams')||'';
			console.log(this.requestParams);
			if (this.requestParams.type == 2) {
				this.jiazaiShow = true
				this.orderSn = this.requestParams.order_sn
				this.isCallback()
			}
		},
		methods: {
			// 用户信息
			getuser() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				memberBalance().then(res => {
					uni.hideLoading()
					console.log(res)
					if (res.code == 1) {
						this.xsMoney = res.data.balance_xs || 0
						this.sdMoney = res.data.balance_sd || 0
						this.xsShow = res.data.open_xs
						this.sdShow = res.data.open_sd
						if(this.cacheData.type == 1){
							if (!this.xsShow) {
								console.log(11111111);
								this.readyMoney = false
							} else {
								this.readyMoney = true
								console.log(2222222);
							}
						}else{
							if ( !this.sdShow) {
								console.log(333333);
								this.readyMoney = false
							} else {
								this.readyMoney = true
								console.log(444444);
							}
						}
					}
				})
			},
			isCallback() {
				let that = this;
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let data = {
					order_sn: that.orderSn,
				}
				orderCheck2(data).then(res => {
					console.log(res);
					uni.hideLoading()
					if (res.code == 1) {
						if (res.data.status == 1) {
							uni.$u.toast('支付成功');
							that.jiazaiShow = false
							setTimeout(function() {
								uni.redirectTo({
									url: '/pagesMy/mallCenter/paySuccess?type=' + '5'
								})
							}, 1500);
						} else {
							that.jiazaiShow = false
							uni.$u.toast('订单创建失败，重连' + that.hknumber, +'次');
							that.hknumber += 1
							setTimeout(function() {
								that.judge()
							}, 1500);
						}
					}else{
						that.jiazaiShow = false
					}
				})
			},
			judge() {
				if (this.hknumber < 3) {
					this.jiazaiShow = true
					this.isCallback()
				} else {
					this.jiazaiShow = false
					uni.$u.toast('支付失败');
				}
			},
			isReady() {
				uni.$u.toast('数据加载中...');
			},
			confirmShow() {
				console.log('支付方式', this.payType);
				if (this.payType == 8) {
					if (Number(this.cacheData.allMoney) > Number(this.xsMoney)) {
						uni.$u.toast('新生余额不足');
					} else {
						this.keyboardShow = true
					}
				} else if (this.payType == 9) {
					if (Number(this.cacheData.allMoney) > Number(this.sdMoney)) {
						uni.$u.toast('杉德余额不足');
					} else {
						this.keyboardShow = true
					}
				} else {
					uni.$u.toast('请选择支付方式');
				}
			},
			// 输入密码
			valChange() {
				if (this.securityPwd.length <= 6) {
					uni.$u.toast("交易密码为6位 ")
					console.log(this.securityPwd);
				}
				if (this.securityPwd.length >= 6) {
					this.keyboardShow = false
					this.integralPays()
				}
			},

			// 支付
			integralPays() {
				uni.showLoading({
					title: '加载中...'
				});
				integralPay({
					id: this.cacheData.selectId,
					pay_type: this.payType,
					client:this.sestype,
					password: this.securityPwd
				}).then(res => {
					uni.hideLoading()
					this.securityPwd = ''
					if (res.code == 1) {
						console.log('---------------- --',res);
						if (res.data.pay_type == 2) {
							// #ifdef APP
							plus.runtime.openURL(res.data.sd_url)                                                                                                                                                                                                           
							// uni.setStorageSync('urls', res.data.sd_url)
							// uni.navigateTo({
							// 	url: "/pagesMy/mywallet/webviewThree"
							// })
							// #endif
							// #ifdef H5
							window.location.href = res.data.sd_url
							// #endif
						} else {
							uni.$u.toast(res.msg);
							setTimeout(function() {
								uni.redirectTo({
									url: '/pagesMy/mallCenter/paySuccess?type=' + 5
								})
							}, 1500);
						}
					}
					uni.$u.toast(res.msg);
				})
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.securityPwd.length) this.securityPwd = this.securityPwd.substr(0, this.securityPwd.length - 1);
				console.log(this.securityPwd);
			},
			changeXs() {
				if (!this.xsPay) {
					this.xsPay = !this.xsPay
					this.sdPay = false
					this.payType = 8
				}
			},
			changeSd() {
				if (!this.sdPay) {
					this.sdPay = !this.sdPay
					this.xsPay = false
					this.payType = 9
				}
			},
			goWallet() {
				uni.navigateTo({
					url: '/pagesMy/mywallet/newmywallet'
				})
			},
			userConfrim() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goNixtPage() {
				uni.navigateTo({
					url: '/pagesMy/brandCenter/numbercard?id=' + this.cacheData.pinpaiId
				})
			},
		},
		onUnload() {
			console.log('触发卸载');
			uni.removeStorageSync("productCacheInfo")
			uni.removeStorageSync('requestParams')
		},
	}
</script>

<style scoped lang="scss">
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.pay_money {
		width: 100%;
		margin-top: 100rpx;
		color: #666666;
	}

	.pay_money>text:nth-child(2) {
		font-size: 90rpx;
		margin: 20rpx 0;
	}

	.pay_box {
		margin-top: 50rpx;
	}

	.pay_box>text {
		color: #333333;
		font-size: 24rpx;
		margin: 20rpx 30rpx;
	}

	.pay_type {
		width: 690rpx;
		background: #F2F2F2;
		border-radius: 14rpx;
		margin: 0 auto 24rpx;
	}

	.img1 {
		width: 66rpx;
		height: 44rpx;
		margin-right: 20rpx;
	}

	.img2 {
		width: 66rpx;
		height: 44rpx;
		margin-right: 20rpx;
		padding-bottom: 14rpx;
	}

	.pay_type_l {
		width: 20%;
	}

	.pay_type_l>image {
		width: 36rpx;
		height: 36rpx;
	}

	.balance {
		width: 100%;
	}

	.balance_top {
		width: 70%;
		padding: 30rpx 0;
		font-size: 32rpx;
		color: #333333;
		font-family: 'iconfont';
		border-bottom: 1rpx solid #00000010;
	}

	.balance_top_s {
		width: 70%;
		padding: 40rpx 0;
		font-size: 24rpx;
		color: #ffffff;
		font-family: 'iconfont';
		border-bottom: 1rpx solid #00000010;
	}

	.available {
		font-size: 28rpx;
		color: #A68A64;
		padding: 20rpx 0;
		margin-left: 140rpx;
	}
	.tips {
		width: 690rpx;
		height: 150rpx;
		background: #F2F2F2;
		border-radius: 14rpx;
		color: #A68A64;
		margin: 0 auto;
		padding: 0 30rpx;
	}

	.ready_my {
		position: relative;
		width: 92%;
		margin: 80rpx auto 30rpx;
	}

	.ready_my>text {
		text-align: center;
		width: 100%;
		background: #c8c9cc;
		color: #ffffff80;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.submit {
		position: relative;
		width: 92%;
		margin: 80rpx auto 30rpx;
	}

	.submit>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.notice {
		width: 590rpx;
		margin: 0 auto;
		padding-bottom: 30rpx;
	}

	.notice>text {
		margin: 20rpx 0;
	}

	.notice_txt {
		line-height: 1.5;
	}



	.prompt {
		width: 600rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 30rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}

	.warning_txt {
		color: #fa3534;
	}

	.zairu {
		width: 690rpx;
		height: 100rpx;
	}

	.pass_wrap {
		width: 602rpx;
		height: 406rpx;
		background: #E0DDDA;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		z-index: 998;

		.tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #262626;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}

		.code_input {
			margin: 0 auto;
		}

		.other_btnwrap {
			width: 522rpx;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 50rpx;

			.other_btn1 {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid #A68A64;
				font-size: 28rpx;
				color: #A68A64;
				text-align: center;
				line-height: 72rpx;
			}

			.other_btn2 {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient(274deg, #AB8E68, #D7BA93);
				border-radius: 40rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}

		.u-code-input {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/deep/.u-code-input__item {
			width: 30px !important;
			height: 30px !important;
			margin-right: 14px !important;
		}

		/deep/.u-code-input__item>text {
			color: #fff !important;
		}
	}
	/deep/.u-code-input__item__line {
		background: #A68A64 !important;
	}
</style>